<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id = "cvs" width="500" height = "500"></canvas>
<input type="file" id = "fileUpload"/>
<script>
    var file = document.getElementById("fileUpload");
    var img = new Image();
    file.addEventListener("change",function(){
        var imgFile = file.files[0];
//        console.log(imgFile);
        var objectUrl = URL.createObjectURL(imgFile);
        img.src = objectUrl;
        var cvs = document.getElementById("cvs");
        var ctx = cvs.getContext("2d");
        img.addEventListener("load",function(){
            var imgW = img.width;
            var imgH = img.height;
            var scaleW = 500/imgW;
            var scaleH = 500/imgH;
            var scale = scaleW>scaleH? scaleH : scaleW;
            var offsetX,offsetY;
            if(scaleW>scaleH){
                offsetY = 0;
                offsetX = (500-imgW*scale)/2;
            }else{
                offsetX = 0;
                offsetY = (500-imgH*scale)/2;
            }
            ctx.drawImage(img,offsetX,offsetY,imgW*scale,imgH*scale);
        });
    });
</script>
</body>
</html>